<template>
  <div class="cluster userManagement">
    <a-card style="width:100%;height:100%;">
      <p slot="title" class="cardTitles">
        <span>用户管理</span>
      </p>
      <div class="user-content card-container">
        <a-tabs type="card" @change="TabChange">
          <a-tab-pane key="1" tab="普通用户">
            <div class="tab-content user-content">
              <div class="formDiv">
                <a-form layout="inline">
                  <a-form-item>
                    <a-select v-model="userKeyName" style="width:130px">
                      <a-select-option value>全部</a-select-option>
                      <a-select-option value="login_name">用户名</a-select-option>
                      <a-select-option value="mobile">手机号</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item>
                    <a-input v-model="keywords" type="text" style="width: 180px;" />
                  </a-form-item>
                  <a-form-item>
                    <a-button type="primary" @click="userSearch">搜索</a-button>
                  </a-form-item>
                  <a-form-item>
                    <a-button @click="userSearchReset">重置</a-button>
                  </a-form-item>
                </a-form>
                <div class="operation-btn">
                  <a-button type="danger" @click="userBatchDelete">删除</a-button>
                </div>
              </div>
              <div class="user-table" style="margin-top:10px;height:88%;overflow-y:auto;">
                <a-table
                  :row-selection="{ selectedRowKeys: userSelectedRowKeys, onChange: onSelectChange }"
                  :columns="userColumns"
                  :data-source="userList"
                  rowKey="id"
                  :pagination="userPagination"
                  @change="userChangePage"
                >
                  <template slot-scope="text,record" slot="userAction">
                    <a class="tools" @click="userEdit(record)">编辑</a>
                    <a class="tools" type="link" @click="selectUnit(record)">选择机构</a>
                    <a class="tools" type="link" @click="userDelete(record)">删除</a>
                    <a class="tools" type="link" @click="userPasswordReset(record)">重置密码</a>
                    <a class="tools" type="link" @click="userSetService(record)">服务授权</a>
                  </template>
                  <template slot-scope="text,record" slot="flag">
                    <a-switch
                      checked-children="启用"
                      un-checked-children="锁定"
                      @change="(checked) => onChange(checked, record)"
                      :checked="record.flag == 0"
                    />
                  </template>
                  <template slot-scope="text,record" slot="loginName">
                    <a class="detail" @click="userdetail(record)">{{record.loginName}}</a>
                  </template>
                </a-table>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="独立机构">
            <div class="tab-content">
              <div class="tab-content-left">
                <div class="search-input">
                  <a-input-search
                    v-model="searchUnitName"
                    placeholder="请输入独立机构名称"
                    @search="onUnitSearch"
                  />
                </div>
                <groupManagement
                  :isShowAddBtn="false"
                  :groupList="unitList"
                  @deleteList="deleteList"
                  @saveList="saveList"
                  @itemClick="itemClick"
                  v-if="show"
                ></groupManagement>
              </div>
              <div class="tab-content-right">
                <div>
                  <a-spin :spinning="spinning">
                    <a-radio-group v-model="selectValue" @change="radioChange">
                      <a-radio-button value="members">成员管理</a-radio-button>
                      <a-radio-button value="service">服务管理</a-radio-button>
                    </a-radio-group>
                    <div
                      class="members-content right-content"
                      v-if="this.selectValue === 'members'"
                    >
                      <div class="formDiv">
                        <a-form layout="inline">
                          <a-form-item>
                            <a-select v-model="keyName" style="width:130px">
                              <a-select-option value>全部</a-select-option>
                              <a-select-option value="login_name">用户名</a-select-option>
                              <a-select-option value="mobile">手机号</a-select-option>
                            </a-select>
                          </a-form-item>
                          <a-form-item>
                            <a-input v-model="searchWord" type="text" style="width: 180px;" />
                          </a-form-item>
                          <a-form-item>
                            <a-button type="primary" @click="memberSearch">搜索</a-button>
                          </a-form-item>
                          <a-form-item>
                            <a-button @click="memberSearchReset">重置</a-button>
                          </a-form-item>
                        </a-form>
                        <div class="operation-btn">
                          <a-button type="danger" @click="membersBatchDelete">删除</a-button>
                        </div>
                      </div>
                      <div class="members-table" style="margin-top:10px">
                        <a-table
                          :row-selection="{ selectedRowKeys: memberSelectedRowKeys, onChange: memberSelectChange }"
                          :columns="columns"
                          :data-source="list"
                          rowKey="id"
                          :pagination="pagination"
                          @change="memberChangePage"
                        >
                          <template slot-scope="text,record" slot="action">
                            <a class="tools" @click="editTableItem(record)">编辑</a>
                            <a class="tools" type="link" @click="tableDelete(record)">删除</a>
                            <a class="tools" type="link" @click="tableReset(record)">重置密码</a>
                          </template>
                          <template slot-scope="text,record" slot="flag">
                            <a-badge
                              :color="record.flag===0?'#87d068':'#f50'"
                              :text="record.flag|userStatus"
                            ></a-badge>
                          </template>
                          <template
                            slot-scope="text,record"
                            slot="isAdmin"
                          >{{record.isAdmin|unitUserType}}</template>
                        </a-table>
                      </div>
                    </div>
                    <div v-else class="service-content right-content">
                      <div class="content-title">
                        <p>产品服务</p>
                      </div>
                      <productList
                        :selectProduct="selectProduct"
                        :options="options"
                        :isSelectTime="isSelectTime"
                        @selectCheckedArr="selectCheckedArr"
                        @updateProductDate="updateProductDate"
                        v-if="productShow"
                      ></productList>
                      <div class="content-title">
                        <p>用户限制</p>
                      </div>
                      <div class="user-number">
                        <p>
                          用户数上限
                          <span v-if="isEdit===false">{{userNumber}}</span>
                          <a-input
                            :maxLength="10"
                            v-else
                            class="user-number-input"
                            v-model="userNumber"
                            @change="userNumberChange"
                          />
                        </p>
                        <i v-if="isEdit===false" @click="userNumEdit" class="iconfont iconbianji1"></i>
                        <i v-else @click="userNumEditSave" class="iconfont iconsuccess"></i>
                        <!-- <i v-if="isEdit===true" @click="cancelEdit()" class="iconfont iconerror"></i> -->
                      </div>
                    </div>
                  </a-spin>
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
    <div class="modal-content">
      <!-- 独立机构成员管理弹框 -->
      <membersEdit
        :id="memberId"
        :membersVisible="membersVisible"
        @closeFunc="membersVisible=false"
        @updateInform="updateMembers"
      ></membersEdit>
      <!-- 普通用户详情 -->
      <userDetail
        :id="userId"
        :userDetailVisible="userDetailVisible"
        @closeFunc="userDetailVisible=false"
      ></userDetail>
      <!-- 普通用户编辑 -->
      <userEdit
        :id="userId"
        :userEditVisible="userEditVisible"
        @closeFunc="userEditVisible=false"
        @updateUserInform="updateUserInform"
      ></userEdit>
      <!-- 选择独立机构 -->
      <userSelectMember
        :id="userId"
        :selectMemberVisible="selectMemberVisible"
        @updateUserUnit="updateUserUnit"
        @closeFunc="selectMemberVisible=false"
      ></userSelectMember>
      <!-- 服务授权 -->
      <userServe
        :id="userId"
        :selectServeVisible="selectServeVisible"
        @closeFunc="selectServeVisible=false"
      ></userServe>
    </div>
  </div>
</template>

<script>
import { paging } from "assets/js/mixin";
import groupManagement from "components/base/groupManagement";
import productList from "components/base/productList";
import membersEdit from "components/configuration/user/membersEdit";
import userDetail from "components/configuration/user/userDetail";
import userEdit from "components/configuration/user/userEdit";
import userSelectMember from "components/configuration/user/userSelectMember";
import userServe from "components/configuration/user/userServe";
import { unitOperation, members, user } from "@/api/user";
export default {
  mixins: [paging],
  components: {
    groupManagement,
    membersEdit,
    productList,
    userDetail,
    userEdit,
    userSelectMember,
    userServe,
  },
  data() {
    return {
      //当前独立机构的id缓存
      unitId: "",
      //普通用户id缓存
      userId: "",
      show: false,
      productShow: false,
      memberSelectedRowKeys: [],
      memberId: "", //成员id
      //独立机构搜索名称
      searchUnitName: "",
      spinning: false,
      isEdit: false,
      userNumber: 0,
      keyName: "",
      searchWord: "",
      keywords: "",
      userKeyName: "",
      numbers: 0,
      input: "",
      editstate: false,
      listCurrent: 0,
      selectValue: "members",
      selectedRowKeys: [],
      unitList: [],
      columns: [
        {
          title: "用户名",
          dataIndex: "loginName",
        },
        {
          title: "手机号",
          dataIndex: "mobile",
        },
        {
          title: "角色类型",
          dataIndex: "isAdmin",
          scopedSlots: { customRender: "isAdmin" },
        },
        {
          title: "状态",
          dataIndex: "flag",
          scopedSlots: { customRender: "flag" },
        },
        {
          title: "操作",
          dataIndex: "action",
          width: 300,
          scopedSlots: { customRender: "action" },
        },
      ],
      list: [],
      //普通用户列表
      userSelectedRowKeys: [],
      userColumns: [
        {
          title: "用户名",
          dataIndex: "loginName",
          scopedSlots: { customRender: "loginName" },
        },
        {
          title: "手机号",
          dataIndex: "mobile",
        },
        {
          title: "单位信息",
          dataIndex: "unitName",
        },
        {
          title: "申请时间",
          dataIndex: "applyTime",
        },
        {
          title: "状态",
          dataIndex: "flag",
          width: 100,
          scopedSlots: { customRender: "flag" },
        },
        {
          title: "操作",
          dataIndex: "userAction",
          width: 350,
          align: "center",
          scopedSlots: { customRender: "userAction" },
        },
      ],
      userList: [],
      //是否显示弹框
      membersVisible: false,
      userDetailVisible: false,
      userEditVisible: false,
      selectMemberVisible: false,
      selectServeVisible: false,
      options: [
        {
          expire: ["2020-08-03", "2020-08-17"],
          id: "111",
          indexUrl: "",
          name: "产品名称A",
          rootId: "",
          servicePath: "",
        },
      ],
      isSelectTime: true,
      checkedValues: [],
      selectChecked: [],
      selectProduct: [], //选中的服务
    };
  },
  mounted() {
    this.getUnitList();
    this.getUserList();
  },
  methods: {
    //成员管理服务管理tab切换
    radioChange() {
      if (this.selectValue === "service") {
        //this.getUnitServeList();
      } else {
        this.getUserList();
      }
    },
    //获取独立机构下服务
    getUnitServeList() {
      this.productShow = false;
      this.spinning = true;
      this.selectProduct = [];
      unitOperation
        .getServiceList(this.unitId)
        .then((res) => {
          if (res.data.data.serviceList === null) {
            this.userNumber = 0;
            this.options = [];
            this.productShow = false;
            this.spinning = false;
            return false;
          }
          this.userNumber = res.data.data.maxUser;
          this.options = res.data.data.serviceList;
          this.options.forEach((item) => {
            if (item.isActive === true) {
              this.selectProduct.push(item.id);
            }
          });
          this.productShow = true;
          this.spinning = false;
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    //获取独立机构列表
    getUnitList() {
      this.show = false;
      unitOperation
        .getUnitList(this.searchUnitName)
        .then((res) => {
          this.unitList = res.data.data;
          if (this.unitList.length > 0) {
            //默认的独立机构id
            this.unitId = res.data.data[0].id;
            this.unitList.forEach((item) => {
              //数据新增属性页面不刷新
              this.$set(item, "isEdit", false);
            });
          } else {
            this.unitId = "";
          }
          this.getMembersList(this.unitId);
          this.getUnitServeList();
          this.show = true;
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    //独立机构搜索
    onUnitSearch() {
      this.getUnitList();
    },
    //删除群组
    deleteList(param) {
      this.spinning = true;
      var paramArr = [];
      paramArr.push(param.id);
      unitOperation
        .delete(paramArr)
        .then((res) => {
          this.spinning = false;
          this.$message.destroy();
          this.$message.success(res.data.msg);
          this.getUnitList();
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    //更新编辑操作
    saveList(val) {
      var param = {
        id: val.grouplist.id,
        unitName: val.grouplist.unitName,
      };
      unitOperation
        .updateUnitName(param)
        .then((res) => {
          this.$message.destroy();
          this.$message.success(res.data.msg);
          this.getUnitList();
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    //点击获取成员列表
    itemClick(val) {
      console.log(val);
      if (null != val) {
        this.unitId = val.id;
        this.getMembersList(val.id);
        this.getUnitServeList();
      }
    },
    //获取成员分组列表
    getMembersList(unitId) {
      this.spinning = true;
      var param = {
        rootId: unitId,
        searchVo: {
          current: this.pageNum,
          filterColumns: this.keyName === "" ? [] : [this.keyName],
          searchWord: this.searchWord,
          size: this.pageSize,
        },
      };
      members
        .getMembersList(param)
        .then((res) => {
          this.list = res.data.data.records;
          this.spinning = false;
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    //成员分组搜索
    memberSearch() {
      this.pageNum = 1;
      this.pagination.current = 1;
      this.getMembersList(this.unitId);
    },
    //重置
    memberSearchReset() {
      this.keyName = "";
      this.searchWord = "";
      this.pageNum = 1;
      this.pagination.current = 1;
      this.getMembersList(this.unitId);
    },
    //成员管理分页操作
    memberChangePage(pagination) {
      this.pageNum = pagination.current;
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getMembersList(this.unitId);
    },
    //成员table多选
    memberSelectChange(selectedRowKeys) {
      this.memberSelectedRowKeys = selectedRowKeys;
    },
    editTableItem(record) {
      this.membersVisible = true;
      this.memberId = record.id;
    },
    updateMembers() {
      this.getMembersList(this.unitId);
      this.membersVisible = false;
    },
    tableDelete(record) {
      var _this = this;
      var param = [record.id];
      this.$confirm({
        title: "您是否确认要删除所选中的记录？",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          members
            .delete(param)
            .then((res) => {
              _this.$message.destroy();
              _this.$message.success(res.data.msg);
              _this.getMembersList(_this.unitId);
            })
            .catch((err) => {
              _this.$message.destroy();
              _this.$message.error(err);
            })
            .finally(() => {});
        },
      });
    },
    tableReset(record) {
      var param = [record.id];
      var _this = this;
      this.$confirm({
        title: "是否确认重置密码？",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          members
            .resetPassword(param)
            .then((res) => {
              _this.$message.destroy();
              _this.$message.success(res.data.msg);
            })
            .catch((err) => {
              _this.$message.destroy();
              _this.$message.error(err);
            })
            .finally(() => {});
        },
      });
    },
    //成员批量删除
    membersBatchDelete() {
      if (this.memberSelectedRowKeys.length === 0) {
        this.$message.destroy();
        this.$message.warning("请选择需要删除的数据");
      } else {
        this.numbers = this.memberSelectedRowKeys.length;
        var _this = this;
        this.$confirm({
          title: "确定要删除" + _this.numbers + "条记录吗？",
          okText: "确定",
          okType: "danger",
          cancelText: "取消",
          onOk() {
            members
              .delete(_this.memberSelectedRowKeys)
              .then(() => {
                _this.$message.destroy();
                _this.$message.success("操作成功");
                _this.getMembersList(_this.unitId);
              })
              .catch((err) => {
                _this.$message.destroy();
                _this.$message.error(err);
              })
              .finally(() => {});
          },
        });
      }
    },
    // 用户数上限修改
    userNumberChange() {
      // const { value } = e.target;
      // const reg = /^-?[0-9]*(\.[0-9]*)?$/;
      // if ((!isNaN(value) && reg.test(value)) || value === "" || value === "-") {
      //   this.userNumber = value;
      // }
    },
    //用户修改编辑状态切换
    userNumEdit() {
      this.isEdit = true;
    },
    userNumEditSave() {
      var value = this.userNumber;
      const reg = /^-?[0-9]*(\.[0-9]*)?$/;
      if ((!isNaN(value) && reg.test(value)) || value === "" || value === "-") {
        var param = {
          rootId: this.unitId,
          maxUser: this.userNumber,
        };
        unitOperation
          .setUserMax(param)
          .then((res) => {
            this.$message.destroy();
            this.$message.success(res.data.msg);
            this.isEdit = false;
          })
          .catch((err) => {
            this.$message.destroy();
            this.$message.error(err);
          });
      } else {
        this.$message.destroy();
        this.$message.error("请输入数字类型");
        this.userNumber = "";
      }
    },
    //更新产品日期时间
    updateProductDate(val) {
      var param = {
        mainId: this.unitId,
        productDate: {
          expire: val.expire,
          systemId: val.id,
        },
      };
      unitOperation
        .updateProductDate(param)
        .then((res) => {
          this.$message.destroy();
          this.$message.success(res.data.msg);
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    //服务选中开通
    selectCheckedArr(val) {
      val.forEach((item) => {
        item.systemId = item.id;
      });
      var param = {
        mainId: this.unitId,
        list: val,
      };
      user
        .openServe(param)
        .then(() => {})
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    onSelectChange(key) {
      this.userSelectedRowKeys = key;
    },
    /**
     * 普通用户列表相关操作
     */

    //普通用户分页操作
    userChangePage(pagination) {
      this.userPageNum = pagination.current;
      this.userPagination.current = pagination.current;
      this.userPagination.pageSize = pagination.pageSize;
      this.getUserList();
    },
    //查看用户详情
    userdetail(record) {
      this.userId = record.id;
      this.userDetailVisible = true;
    },
    //用户编辑
    userEdit(record) {
      this.userId = record.id;
      this.userEditVisible = true;
    },
    //编辑保存
    updateUserInform() {
      this.getUserList();
      this.userEditVisible = false;
    },
    onChange(checked, record) {
      var _this = this;
      this.$confirm({
        title: record.flag == 1 ? "是否启用该用户？" : "是否锁定该用户？",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          if (checked) {
            record.flag = 0;
            _this.enableUser(record);
          } else {
            record.flag = 1;
            _this.disableUser(record);
          }
        },
      });
    },
    enableUser(record) {
      //启用
      var param = {
        ids: record.id,
        status: "enable",
      };
      user
        .disableUser(param)
        .then(() => {
          this.$message.destroy();
          this.$message.success("启用成功~");
          this.getUserList();
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    disableUser(record) {
      //禁用
      var param = {
        ids: record.id,
        status: "disable",
      };
      user
        .disableUser(param)
        .then(() => {
          this.$message.destroy();
          this.$message.success("禁用成功~");
          this.getUserList();
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    //选择独立机构
    selectUnit(record) {
      this.userId = record.id;
      this.selectMemberVisible = true;
    },
    //用户删除
    userDelete(record) {
      var _this = this;
      var param = [record.id];
      this.$confirm({
        title: "您是否确认要删除所选中的记录？",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          members
            .delete(param)
            .then((res) => {
              _this.$message.destroy();
              _this.$message.success(res.data.msg);
              _this.getUserList();
            })
            .catch((err) => {
              _this.$message.destroy();
              _this.$message.error(err);
            })
            .finally(() => {});
        },
      });
    },
    //普通用户批量删除
    userBatchDelete() {
      if (this.userSelectedRowKeys.length === 0) {
        this.$message.destroy();
        this.$message.warning("请选择需要删除的数据");
      } else {
        this.numbers = this.userSelectedRowKeys.length;
        var _this = this;
        this.$confirm({
          title: "确定要删除" + _this.numbers + "条记录吗？",
          okText: "确定",
          okType: "danger",
          cancelText: "取消",
          onOk() {
            members
              .delete(_this.userSelectedRowKeys)
              .then(() => {
                _this.$message.destroy();
                _this.$message.success("操作成功");
                _this.getUserList();
              })
              .catch((err) => {
                _this.$message.destroy();
                _this.$message.error(err);
              })
              .finally(() => {});
          },
        });
      }
    },
    //重置密码
    userPasswordReset(record) {
      var param = [record.id];
      var _this = this;
      this.$confirm({
        title: "是否确认重置密码？",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          members
            .resetPassword(param)
            .then((res) => {
              _this.$message.destroy();
              _this.$message.success(res.data.msg);
            })
            .catch((err) => {
              _this.$message.destroy();
              _this.$message.error(err);
            })
            .finally(() => {});
        },
      });
    },
    //服务授权
    userSetService(record) {
      this.userId = record.id;
      this.selectServeVisible = true;
    },
    //普通用户列表获取
    getUserList() {
      var param = {
        current: this.userPageNum,
        filterColumns: this.userKeyName === "" ? [] : [this.userKeyName],
        searchWord: this.keywords,
        size: this.userPageSize,
      };
      user
        .getUserList(param)
        .then((res) => {
          this.userList = res.data.data.records;
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    //普通用户搜索
    userSearch() {
      this.userPageNum = 1;
      this.userPagination.current = 1;
      this.getUserList();
    },
    //普通用户重置
    userSearchReset() {
      this.userKeyName = "";
      this.keywords = "";
      this.userPageNum = 1;
      this.userPagination.current = 1;
      this.getUserList();
    },
    //更新选择独立机构
    updateUserUnit() {
      this.selectMemberVisible = false;
      this.getUserList();
    },
    /**
     * 普通用户列表相关操作结束
     */

    TabChange(key) {
      if (key == 2) {
        this.getMembersList(this.unitId);
        if (this.unitList.length !== 0) {
          this.getUnitServeList();
        } else {
          this.options = [];
        }
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.userManagement {
  height: 100%;
  overflow: hidden;

  .card-container {
    .tab-content {
      height: 100%;
    }

    .tab-content-left {
      float: left;
      width: 320px;
      height: 100%;
      padding: 10px 0px 15px 10px;
      box-sizing: border-box;
      background: #f3f4f9;
      overflow-y: auto;
      overflow: hidden;

      .search-input {
        padding-right: 10px;
        margin-bottom: 10px;
      }

      .operation {
        font-size: 16px;
        color: #919191;
        margin: 20px 0;
        overflow: hidden;
        position: relative;
        display: flex;
        justify-content: space-between;
        padding: 0 20px 0 10px;
        align-items: center;

        i {
          color: #6cb3fb;
          font-size: 20px;
          cursor: pointer;
        }
      }
    }

    .tab-content-right {
      margin-left: 320px;
      padding: 0px 0px 10px 25px;
      height: 100%;
      box-sizing: border-box;
      position: relative;
      overflow-y: auto;

      .formDiv {
        margin-top: 30px;
        position: relative;

        .operation-btn {
          position: absolute;
          top: 4px;
          right: 0;

          span {
            margin-right: 15px;
            cursor: pointer;
          }
        }
      }

      .content-title {
        font-size: 18px;
        margin-top: 30px;
        padding-left: 15px;
        border-left: 5px solid #1890ff;

        p {
          font-weight: bold;
        }
      }

      .user-number {
        padding: 15px 20px 20px 15px;
        border: 1px solid #eeeeee;
        box-shadow: 0 0 10px #dadada;
        border-radius: 3px;
        margin-top: 20px;
        width: 300px;
        position: relative;

        p {
          color: #919191;
          font-size: 16px;
          display: flex;
          align-items: center;

          span {
            color: #333333;
            font-size: 20px;
            margin: 0 11px;
            display: inline-block;
            height: 32px;
            padding-left: 11px;
          }
        }

        i {
          color: #3398fc;
          font-size: 20px;
          position: absolute;
          top: 14px;
          right: 35px;
          cursor: pointer;
        }

        .user-number-input {
          width: 100px;
          margin-left: 10px;
          font-size: 18px;
        }
      }
    }

    .user-content {
      .formDiv {
        position: relative;
      }

      .operation-btn {
        position: absolute;
        top: 0;
        right: 0;
      }

      a.detail {
        color: #66b1ff;
      }

      a.detail:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>